<template>
  <div class="login">
    <div class="login-content">

      <div class="header_image">

        <div id="audio_btn" :class="musicTF?'rotate':'close-music'" ref="audioBtn" @click="clickMusic">
          <!-- <audio
            id="music"
            src="http://downsc.chinaz.net/Files/DownLoad/sound1/201911/12266.mp3"
            class="media-audio"
            ref="MusicPlay"
            autoplay="true"
            muted="muted"
            preload
            loop
          ></audio> -->
          <audio id="music" src="../../assets/123.mp3" preload="preload" autoplay="autoplay" ref="MusicPlay"  loop="loop" />
        </div>
        <poster
          v-if="showPoster"
          @closePoster="showPoster=false"
          :pictures="pictures"
          :greeting="greeting"
        ></poster>
        <simple-cropper
          :initParam="uploadParam"
          :successCallback="uploadHandle"
          ref="cropper"
          @showPoster="showPosterPop"
          @closeCropperFrom="closeCropperFrom"
          v-if="isShowCropperFrom"
        ></simple-cropper>
      </div>

      
      <div class="join-main" v-if="!isShowCropperFrom">
        <div class="btn-join" @click="showCropperFrom"></div>
      </div>
      
    </div>
  </div>
</template>

<script>
import lrz from "lrz";
import poster from "@/components/poster.vue";
import simpleCropper from "@/components/simpleCropper.vue";
import wx from "weixin-js-sdk";

export default {
  components: {
    poster,
    simpleCropper
  },
  data() {
    return {
      pictures: "",
      showPoster: false,
      uploadParam: {
        scale: 4 // 相对手机屏幕放大的倍数: 4倍
      },
      isShowCropperFrom: false,
      musicTF: true,
      greeting: ""
    };
  },
  mounted() {
    // let timer = setTimeout(e =>{
    //   this.$refs.audioBtn.click();
    // }, 1500);
    wx.config({
      // 配置信息, 即使不正确也能使用 wx.ready
      debug: false,
      appId: "",
      timestamp: 1,
      nonceStr: "",
      signature: "",
      jsApiList: []
    });
    wx.ready(function() {
      document.getElementById("music").play();
      // debugger
      // this.$refs.audioBtn.click();
    });
    this.audioAutoPlay('music'); 
  },
  methods: {
    audioAutoPlay(id){  
      var audio = document.getElementById(id),  
          play = function(){  
              audio.play();  
              document.removeEventListener("touchstart",play, false);  
          };  
      audio.play();  
      document.addEventListener("WeixinJSBridgeReady", function () {  
          play();  
      }, false);  
      document.addEventListener('YixinJSBridgeReady', function() {  
          play();  
      }, false);  
      document.addEventListener("touchstart",play, false);  
    }, 
    showCropperFrom() {
      this.isShowCropperFrom = true;
    },
    uploadHandle(img) {
      this.pictures = img;
    },
    showPosterPop(val) {
      this.greeting = val;
      this.showPoster = true;
      this.isShowCropperFrom = false;
    },
    closeCropperFrom() {
      this.isShowCropperFrom = false;
    },
    clickMusic() {
      if (this.musicTF) {
        this.$refs.MusicPlay.pause();
      } else {
        this.$refs.MusicPlay.play();
      }
      this.musicTF = !this.musicTF;
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  height: 100%;
  .login-content {
    width: 100%;
    height: 100%;
    background-image: url("../../assets/img/home1.jpg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% auto;
    background-color: hsl(196.33deg 62.03% 53.53%);
    overflow: hidden;
    .btn-join {
      width: 219px;
      height: 27px;
      position: relative;
      background-image: url("../../assets/img/one.png");
      background-size: cover;
      margin: 20px auto;
      border-radius: 10px;
    }
  }
}
.rotate {
  width: 32px;
  height: 32px;
  background-image: url("../../assets/img/music.png");
  background-size: cover;
  border-radius: 10px;
  position: absolute;
  right: 20px;
  top: 10px;
}
.close-music {
  width: 32px;
  height: 32px;
  background-image: url("../../assets/img/music_close.png");
  background-size: cover;
  border-radius: 10px;
  position: absolute;
  right: 20px;
  top: 10px;
}
.join-main {
  width: 100%;
  position: absolute;
  bottom: 100px;
}
.header_image {
    width: 90%;
    height: 150px;
    margin: 0px auto;
    margin-top: 20px;
    background-image: url("../../assets/img/header.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
}
</style>
